<!DOCTYPE html>
<html>

<!-- Mirrored from mustard-ui.com/docs/alignment/ by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 18 Feb 2020 23:12:50 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alignment &middot; CSS Layout and Composition &middot; Mustard UI</title>

<meta name="description" content="Alignment classes are provided to help with both container and text alignment. Floats are currently provided, but may be removed in future versions thanks to the browser support of flexbox."/>
<link rel="canonical" href="index.html" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Alignment &middot; CSS Layout and Composition &middot; Mustard UI" />
<meta property="og:description" content="Alignment classes are provided to help with both container and text alignment. Floats are currently provided, but may be removed in future versions thanks to the browser support of flexbox." />
<meta property="og:url" content="index.html" />
<meta property="og:site_name" content="Mustard UI" />
<meta property="og:image" content="../../wp-content/uploads/2018/04/mustard-ui-image.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Alignment classes are provided to help with both container and text alignment. Floats are currently provided, but may be removed in future versions thanks to the browser support of flexbox." />
<meta name="twitter:title" content="Alignment &middot; CSS Layout and Composition &middot; Mustard UI" />
<meta name="twitter:site" content="@hellokyle" />
<meta name="twitter:image" content="../../wp-content/uploads/2018/04/mustard-ui-image.png" />
<meta name="twitter:creator" content="@hellokyle" />
<script type='application/ld+json' class='yoast-schema-graph yoast-schema-graph--main'>{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://mustard-ui.com/#website","url":"https://mustard-ui.com/","name":"Mustard UI","potentialAction":{"@type":"SearchAction","target":"https://mustard-ui.com/?s={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"WebPage","@id":"https://mustard-ui.com/docs/alignment/#webpage","url":"https://mustard-ui.com/docs/alignment/","inLanguage":"en-US","name":"Alignment &middot; CSS Layout and Composition &middot; Mustard UI","isPartOf":{"@id":"https://mustard-ui.com/#website"},"datePublished":"2018-04-02T01:27:24+00:00","dateModified":"2018-04-04T14:52:15+00:00","description":"Alignment classes are provided to help with both container and text alignment. Floats are currently provided, but may be removed in future versions thanks to the browser support of flexbox."}]}</script>

<link rel='dns-prefetch' href='http://cdnjs.cloudflare.com/' />
<link rel='dns-prefetch' href='http://s.w.org/' />
<link rel='stylesheet' id='wp-block-library-css'  href='../../wp-includes/css/dist/block-library/style.min6619.css?ver=5.2.5' type='text/css' media='all' />
<link rel='https://api.w.org/' href='../../wp-json/index.html' />
<link rel="alternate" type="application/json+oembed" href="../../wp-json/oembed/1.0/embed0ff2.json?url=https%3A%2F%2Fmustard-ui.com%2Fdocs%2Falignment%2F" />
<link rel="alternate" type="text/xml+oembed" href="../../wp-json/oembed/1.0/embedaeb5?url=https%3A%2F%2Fmustard-ui.com%2Fdocs%2Falignment%2F&amp;format=xml" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Averia+Libre:400,700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism.min.css">
    <link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css">
    <link rel="stylesheet" href="../../wp-content/themes/mustard/css/styles.css">
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-116959999-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-116959999-1');
    </script>
    <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '129244174588258');
      fbq('track', 'PageView');
    </script>
    <script>
        (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:842735,hjsv:6};
            a=o.getElementsByTagName('head')[0];
            r=o.createElement('script');r.async=1;
            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
            a.appendChild(r);
        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
</head>
<body>
    <a href="https://github.com/kylelogue/mustard-ui" target="_blank" class="github-corner display-md-up" aria-label="View source on Github">
    <svg width="60" height="60" viewBox="0 0 250 250" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg>
</a>

<nav>
    <div class="nav-container">
        <div class="nav-logo">
            <a href="../../index.html">mustard</a>
        </div>
        <ul class="nav-links">
            <li><a class="active" href="../installation/index.html">Docs</a></li>
            <li><a href="https://github.com/kylelogue/mustard-ui" target="_blank">GitHub</a></li>
        </ul>
        <a class="mobile-menu-toggle"></a>
        <ul class="mobile-menu menu">
            <li><a href="../installation/index.html">Docs</a></li>
            <li><a href="https://github.com/kylelogue/mustard-ui" target="_blank">GitHub</a></li>
        </ul>
    </div>
</nav>

    <main>

        <div class="container">
            <div class="row row-reverse">

                                    <div class="col col-lg-9">
                        <section>
                            <div class="row">
    <div class="form-control col col-md-6 display-lg-down">
        <label for="">Jump to:</label>
        <select onchange="window.location.href=this.value">
                            <optgroup label="Getting Started">

                    
                                            <option value="../installation/index.html" >Installation</option>

                                            <option value="../overview/index.html" >Overview</option>

                                            <option value="../variables/index.html" >Variables</option>

                                    </optgroup>
                            <optgroup label="Components">

                    
                                            <option value="../alerts/index.html" >Alerts</option>

                                            <option value="../breadcrumbs/index.html" >Breadcrumbs</option>

                                            <option value="../cards/index.html" >Cards</option>

                                            <option value="../footer/index.html" >Footer</option>

                                            <option value="../header/index.html" >Header</option>

                                            <option value="../menus/index.html" >Menus</option>

                                            <option value="../modals/index.html" >Modals</option>

                                            <option value="../navigation/index.html" >Navigation</option>

                                            <option value="../pagination/index.html" >Pagination</option>

                                            <option value="../panels/index.html" >Panels</option>

                                            <option value="../pricing-tables/index.html" >Pricing Tables</option>

                                            <option value="../progress-bars/index.html" >Progress Bars</option>

                                            <option value="../sidebars/index.html" >Sidebars</option>

                                            <option value="../steppers/index.html" >Steppers</option>

                                            <option value="../tabs/index.html" >Tabs</option>

                                            <option value="../tags/index.html" >Tags</option>

                                            <option value="../tooltips/index.html" >Tooltips</option>

                                    </optgroup>
                            <optgroup label="HTML Elements">

                    
                                            <option value="../blockquotes/index.html" >Blockquotes</option>

                                            <option value="../buttons/index.html" >Buttons</option>

                                            <option value="../code/index.html" >Code</option>

                                            <option value="../forms/index.html" >Forms</option>

                                            <option value="../links/index.html" >Links</option>

                                            <option value="../lists/index.html" >Lists</option>

                                            <option value="../tables/index.html" >Tables</option>

                                            <option value="../typography/index.html" >Typography</option>

                                    </optgroup>
                            <optgroup label="Utility Classes">

                    
                                            <option value="https://mustard-ui.com/docs/alignment/" selected>Alignment</option>

                                            <option value="../containers/index.html" >Containers</option>

                                            <option value="../display/index.html" >Display</option>

                                            <option value="../flexbox-grid/index.html" >Flexbox Grid</option>

                                            <option value="../sections/index.html" >Sections</option>

                                    </optgroup>
                            <optgroup label="Mixins">

                    
                                            <option value="../breakpoint-mixin/index.html" >Breakpoint Mixin</option>

                                            <option value="../centering-mixins/index.html" >Centering Mixins</option>

                                            <option value="../clearfix-mixin/index.html" >Clearfix Mixin</option>

                                            <option value="../triangle-mixin/index.html" >Triangle Mixin</option>

                                    </optgroup>
                    </select>
    </div>
</div>
                            <h1 class="h2">Alignment</h1>
                            <p>Alignment classes are provided to help with both container and text alignment.  Floats are currently provided, but may be removed in future versions thanks to the browser support of flexbox.  If you need more control over alignment, please also see <a href="../flexbox-grid/index.html">flexbox grid</a>.</p>

<p><strong>Classes available:</strong></p>
<pre class="language-css">
    <code class="language-css">
        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }

        .clear-fix {
            @include clearfix();
        }

        .align-left {
            text-align: left;
        }

        .align-center {
            text-align: center;
        }

        .align-right {
            text-align: right;
        }    
    </code>
</pre>                        </section>
                        <section class="align-right">
                            Up Next: <a href="../containers/index.html" rel="next">Containers</a> &raquo;                        </section>
                    </div>

                    <div class="col col-lg-3 display-lg-up">
                        
<div class="sidebar sidebar-left">
                    <h3 class="sidebar-category ">Getting Started</h3>

        
        <ul class="sidebar-links">
                            <li><a class="" href="../installation/index.html">Installation</a></li>
                            <li><a class="" href="../overview/index.html">Overview</a></li>
                            <li><a class="" href="../variables/index.html">Variables</a></li>
                    </ul>

                    <h3 class="sidebar-category ">Components</h3>

        
        <ul class="sidebar-links">
                            <li><a class="" href="../alerts/index.html">Alerts</a></li>
                            <li><a class="" href="../breadcrumbs/index.html">Breadcrumbs</a></li>
                            <li><a class="" href="../cards/index.html">Cards</a></li>
                            <li><a class="" href="../footer/index.html">Footer</a></li>
                            <li><a class="" href="../header/index.html">Header</a></li>
                            <li><a class="" href="../menus/index.html">Menus</a></li>
                            <li><a class="" href="../modals/index.html">Modals</a></li>
                            <li><a class="" href="../navigation/index.html">Navigation</a></li>
                            <li><a class="" href="../pagination/index.html">Pagination</a></li>
                            <li><a class="" href="../panels/index.html">Panels</a></li>
                            <li><a class="" href="../pricing-tables/index.html">Pricing Tables</a></li>
                            <li><a class="" href="../progress-bars/index.html">Progress Bars</a></li>
                            <li><a class="" href="../sidebars/index.html">Sidebars</a></li>
                            <li><a class="" href="../steppers/index.html">Steppers</a></li>
                            <li><a class="" href="../tabs/index.html">Tabs</a></li>
                            <li><a class="" href="../tags/index.html">Tags</a></li>
                            <li><a class="" href="../tooltips/index.html">Tooltips</a></li>
                    </ul>

                    <h3 class="sidebar-category ">HTML Elements</h3>

        
        <ul class="sidebar-links">
                            <li><a class="" href="../blockquotes/index.html">Blockquotes</a></li>
                            <li><a class="" href="../buttons/index.html">Buttons</a></li>
                            <li><a class="" href="../code/index.html">Code</a></li>
                            <li><a class="" href="../forms/index.html">Forms</a></li>
                            <li><a class="" href="../links/index.html">Links</a></li>
                            <li><a class="" href="../lists/index.html">Lists</a></li>
                            <li><a class="" href="../tables/index.html">Tables</a></li>
                            <li><a class="" href="../typography/index.html">Typography</a></li>
                    </ul>

                    <h3 class="sidebar-category active">Utility Classes</h3>

        
        <ul class="sidebar-links">
                            <li><a class="active" href="index.html">Alignment</a></li>
                            <li><a class="" href="../containers/index.html">Containers</a></li>
                            <li><a class="" href="../display/index.html">Display</a></li>
                            <li><a class="" href="../flexbox-grid/index.html">Flexbox Grid</a></li>
                            <li><a class="" href="../sections/index.html">Sections</a></li>
                    </ul>

                    <h3 class="sidebar-category ">Mixins</h3>

        
        <ul class="sidebar-links">
                            <li><a class="" href="../breakpoint-mixin/index.html">Breakpoint Mixin</a></li>
                            <li><a class="" href="../centering-mixins/index.html">Centering Mixins</a></li>
                            <li><a class="" href="../clearfix-mixin/index.html">Clearfix Mixin</a></li>
                            <li><a class="" href="../triangle-mixin/index.html">Triangle Mixin</a></li>
                    </ul>

    </div>
                    </div>
                
            </div>
        </div>

    </main>

    <footer>
    <div class="container">
        <div class="row">
            <div class="col col-lg-5">
                <div class="footer-text">
                    <p>Mustard UI was created to address the growing concern of CSS frameworks that look pretty bad.  We took what we knew and liked about CSS and adapted it into a lightweight and production ready library.</p>
                    <p>Thanks for trying it out!</p>
                </div>
            </div>
            <div class="col col-sm-6 col-lg-3 col-lg-offset-1">
                <h4 class="footer-links-category">Top CSS Examples</h4>
                <ul class="footer-links">
                    <li><a href="../buttons/index.html">Buttons</a></li>
                    <li><a href="../flexbox-grid/index.html">Flexbox Grid</a></li>
                    <li><a href="../pricing-tables/index.html">Pricing Tables</a></li>
                    <li><a href="../progress-bars/index.html">Progress Bars</a></li>
                </ul>
            </div>

            <div class="col col-sm-6 col-lg-3">
                <h4 class="footer-links-category">Stay in Touch</h4>
                <ul class="footer-links">
                    <li><a href="https://twitter.com/HelloKyle" target="_blank">Follow on Twitter</a></li>
                    <li><a href="https://github.com/kylelogue/mustard-ui" target="_blank">Star on GitHub</a></li>
                </ul>
            </div>
        </div>
    </div>

    <p class="copyright align-center">Made with 🌭 by Kyle Logue. Licensed under the MIT License.</p>

</footer>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=5.2.5'></script>
<script type='text/javascript' src='../../wp-content/themes/mustard/js/scripts6619.js?ver=5.2.5'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/prism.min.js?ver=5.2.5'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/plugins/normalize-whitespace/prism-normalize-whitespace.js?ver=5.2.5'></script>
<script type='text/javascript' src='../../wp-includes/js/wp-embed.min6619.js?ver=5.2.5'></script>
</body>

<!-- Mirrored from mustard-ui.com/docs/alignment/ by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 18 Feb 2020 23:12:52 GMT -->
</html>
